프론트엔드 아키텍처: 확장 가능한 애플리케이션을 위한 헥사고날 및 클린 아키텍처

프론트엔드 애플리케이션이 복잡해짐에 따라, 잘 정의된 아키텍처는 유지보수성, 테스트 용이성, 확장성을 위해 매우 중요해졌습니다. 이러한 문제를 해결하는 두 가지 인기 있는 아키텍처 패턴은 헥사고날 아키텍처(포트와 어댑터라고도 함)와 클린 아키텍처입니다. 백엔드 세계에서 시작되었지만, 이러한 원칙들은 견고하고 적응성 높은 사용자 인터페이스를 만들기 위해 프론트엔드 개발에 효과적으로 적용될 수 있습니다.

프론트엔드 아키텍처란 무엇인가?

프론트엔드 아키텍처는 프론트엔드 애플리케이션 내의 다양한 구성 요소의 구조, 조직 및 상호 작용을 정의합니다. 이는 애플리케이션이 어떻게 구축, 유지보수, 확장되는지에 대한 청사진을 제공합니다. 좋은 프론트엔드 아키텍처는 다음을 촉진합니다:

• 유지보수성: 코드를 더 쉽게 이해하고, 수정하고, 디버깅할 수 있습니다.
• 테스트 용이성: 단위 테스트와 통합 테스트 작성을 용이하게 합니다.
• 확장성: 애플리케이션이 증가하는 복잡성과 사용자 부하를 처리할 수 있게 합니다.
• 재사용성: 애플리케이션의 여러 부분에서 코드 재사용을 촉진합니다.
• 유연성: 변화하는 요구사항과 새로운 기술에 적응합니다.

명확한 아키텍처가 없으면 프론트엔드 프로젝트는 빠르게 모놀리식 구조가 되어 관리가 어려워지고, 개발 비용 증가와 민첩성 감소로 이어질 수 있습니다.

헥사고날 아키텍처 소개

Alistair Cockburn이 제안한 헥사고날 아키텍처는 애플리케이션의 핵심 비즈니스 로직을 데이터베이스, UI 프레임워크, 서드파티 API와 같은 외부 종속성으로부터 분리하는 것을 목표로 합니다. 이는 포트와 어댑터라는 개념을 통해 달성됩니다.

헥사고날 아키텍처의 핵심 개념:

• 코어 (도메인): 애플리케이션의 비즈니스 로직과 유스 케이스를 포함합니다. 외부 프레임워크나 기술로부터 독립적입니다.
• 포트: 코어가 외부 세계와 어떻게 상호 작용하는지를 정의하는 인터페이스입니다. 코어의 입력 및 출력 경계를 나타냅니다.
• 어댑터: 코어를 특정 외부 시스템에 연결하는 포트의 구현체입니다. 두 가지 유형의 어댑터가 있습니다:
• 주도 어댑터 (Primary Adapters): 코어와의 상호 작용을 시작합니다. 예시로는 UI 컴포넌트, 명령줄 인터페이스 또는 다른 애플리케이션이 있습니다.
• 피주도 어댑터 (Secondary Adapters): 코어에 의해 호출되어 외부 시스템과 상호 작용합니다. 예시로는 데이터베이스, API 또는 파일 시스템이 있습니다.

코어는 특정 어댑터에 대해 아무것도 알지 못합니다. 오직 포트를 통해서만 어댑터와 상호 작용합니다. 이러한 디커플링을 통해 코어 로직에 영향을 주지 않고 다른 어댑터를 쉽게 교체할 수 있습니다. 예를 들어, 주도 어댑터를 교체하는 것만으로 한 UI 프레임워크(예: React)에서 다른 프레임워크(예: Vue.js)로 전환할 수 있습니다.

헥사고날 아키텍처의 이점:

• 향상된 테스트 용이성: 핵심 비즈니스 로직을 외부 종속성에 의존하지 않고 격리하여 쉽게 테스트할 수 있습니다. 모의 어댑터를 사용하여 외부 시스템의 동작을 시뮬레이션할 수 있습니다.
• 증가된 유지보수성: 외부 시스템의 변경이 코어 로직에 미치는 영향을 최소화합니다. 이로 인해 시간이 지남에 따라 애플리케이션을 유지보수하고 발전시키기 더 쉬워집니다.
• 더 큰 유연성: 어댑터를 추가하거나 교체하여 애플리케이션을 새로운 기술과 요구사항에 쉽게 적응시킬 수 있습니다.
• 향상된 재사용성: 핵심 비즈니스 로직을 다른 어댑터에 연결하여 다양한 컨텍스트에서 재사용할 수 있습니다.

클린 아키텍처 소개

Robert C. Martin (Uncle Bob)에 의해 대중화된 클린 아키텍처는 관심사 분리와 디커플링을 강조하는 또 다른 아키텍처 패턴입니다. 이는 프레임워크, 데이터베이스, UI 및 모든 외부 요소로부터 독립적인 시스템을 만드는 데 중점을 둡니다.

클린 아키텍처의 핵심 개념:

클린 아키텍처는 애플리케이션을 동심원 계층으로 구성하며, 가장 추상적이고 재사용 가능한 코드는 중앙에, 가장 구체적이고 기술에 특화된 코드는 외부 계층에 위치합니다.

• 엔티티: 애플리케이션의 핵심 비즈니스 객체와 규칙을 나타냅니다. 외부 시스템으로부터 독립적입니다.
• 유스 케이스: 애플리케이션의 비즈니스 로직과 사용자가 시스템과 상호 작용하는 방식을 정의합니다. 엔티티를 조율하여 특정 작업을 수행합니다.
• 인터페이스 어댑터: 유스 케이스와 외부 시스템 간의 데이터를 변환합니다. 이 계층에는 프레젠터, 컨트롤러, 게이트웨이가 포함됩니다.
• 프레임워크 및 드라이버: UI 프레임워크, 데이터베이스 및 기타 외부 기술을 포함하는 가장 바깥쪽 계층입니다.

클린 아키텍처의 의존성 규칙은 외부 계층이 내부 계층에 의존할 수는 있지만, 내부 계층은 외부 계층에 의존할 수 없다고 명시합니다. 이는 핵심 비즈니스 로직이 외부 프레임워크나 기술로부터 독립적임을 보장합니다.

클린 아키텍처의 이점:

• 프레임워크로부터 독립적: 아키텍처는 기능이 풍부한 소프트웨어 라이브러리의 존재에 의존하지 않습니다. 이를 통해 프레임워크를 도구로 사용할 수 있으며, 시스템을 프레임워크의 제한된 제약에 억지로 맞출 필요가 없습니다.
• 테스트 용이성: 비즈니스 규칙은 UI, 데이터베이스, 웹 서버 또는 다른 외부 요소 없이 테스트할 수 있습니다.
• UI로부터 독립적: UI는 시스템의 나머지 부분을 변경하지 않고도 쉽게 변경할 수 있습니다. 웹 UI는 비즈니스 규칙을 변경하지 않고 콘솔 UI로 대체될 수 있습니다.
• 데이터베이스로부터 독립적: Oracle이나 SQL Server를 Mongo, BigTable, CouchDB 또는 다른 것으로 교체할 수 있습니다. 비즈니스 규칙은 데이터베이스에 얽매이지 않습니다.
• 모든 외부 요소로부터 독립적: 실제로 비즈니스 규칙은 외부 세계에 대해 *아무것도* 알지 못합니다.

프론트엔드 개발에 헥사고날 및 클린 아키텍처 적용하기

헥사고날 아키텍처와 클린 아키텍처는 종종 백엔드 개발과 연관되지만, 그 원칙들은 프론트엔드 애플리케이션의 아키텍처와 유지보수성을 개선하기 위해 효과적으로 적용될 수 있습니다. 방법은 다음과 같습니다:

1. 코어(도메인) 식별하기

첫 번째 단계는 프론트엔드 애플리케이션의 핵심 비즈니스 로직을 식별하는 것입니다. 여기에는 UI 프레임워크나 외부 API와 독립적인 엔티티, 유스 케이스, 비즈니스 규칙이 포함됩니다. 예를 들어, 전자상거래 애플리케이션에서 코어는 상품, 장바구니, 주문 관리 로직을 포함할 수 있습니다.

예시: 작업 관리 애플리케이션에서 코어 도메인은 다음으로 구성될 수 있습니다:

• 엔티티: Task(작업), Project(프로젝트), User(사용자)
• 유스 케이스: CreateTask(작업 생성), UpdateTask(작업 수정), AssignTask(작업 할당), CompleteTask(작업 완료), ListTasks(작업 목록 조회)
• 비즈니스 규칙: 작업은 제목이 있어야 하며, 프로젝트의 멤버가 아닌 사용자에게 작업을 할당할 수 없습니다.

2. 포트와 어댑터(헥사고날 아키텍처) 또는 계층(클린 아키텍처) 정의하기

다음으로, 코어를 외부 시스템과 분리하는 포트와 어댑터(헥사고날 아키텍처) 또는 계층(클린 아키텍처)을 정의합니다. 프론트엔드 애플리케이션에서는 다음과 같은 것들이 포함될 수 있습니다:

• UI 컴포넌트 (주도 어댑터/프레임워크 및 드라이버): 사용자와 상호 작용하는 React, Vue.js, Angular 컴포넌트.
• API 클라이언트 (피주도 어댑터/인터페이스 어댑터): 백엔드 API에 요청을 보내는 서비스.
• 데이터 저장소 (피주도 어댑터/인터페이스 어댑터): 로컬 스토리지, IndexedDB 또는 기타 데이터 저장 메커니즘.
• 상태 관리 (인터페이스 어댑터): Redux, Vuex 또는 기타 상태 관리 라이브러리.

헥사고날 아키텍처 사용 예시:

• 코어: 작업 관리 로직 (엔티티, 유스 케이스, 비즈니스 규칙).
• 포트: TaskService (작업 생성, 수정, 조회를 위한 메서드 정의).
• 주도 어댑터: TaskService를 사용하여 코어와 상호 작용하는 React 컴포넌트.
• 피주도 어댑터: TaskService를 구현하고 백엔드 API에 요청을 보내는 API 클라이언트.

클린 아키텍처 사용 예시:

• 엔티티: Task, Project, User (순수 JavaScript 객체).
• 유스 케이스: CreateTaskUseCase, UpdateTaskUseCase (엔티티 조율).
• 인터페이스 어댑터:
  • 컨트롤러: UI로부터의 사용자 입력을 처리.
  • 프레젠터: UI에 표시할 데이터를 포맷.
  • 게이트웨이: API 클라이언트와 상호 작용.
• 프레임워크 및 드라이버: React 컴포넌트, API 클라이언트 (axios, fetch).

3. 어댑터(헥사고날 아키텍처) 또는 계층(클린 아키텍처) 구현하기

이제 코어를 외부 시스템에 연결하는 어댑터나 계층을 구현합니다. 어댑터나 계층이 코어로부터 독립적인지, 그리고 코어가 오직 포트나 인터페이스를 통해서만 이들과 상호 작용하는지 확인하세요. 이를 통해 코어 로직에 영향을 주지 않고 다른 어댑터나 계층을 쉽게 교체할 수 있습니다.

예시 (헥사고날 아키텍처):

// TaskService 포트
interface TaskService {
  createTask(taskData: TaskData): Promise;
  updateTask(taskId: string, taskData: TaskData): Promise;
  getTask(taskId: string): Promise;
}

// API 클라이언트 어댑터
class ApiTaskService implements TaskService {
  async createTask(taskData: TaskData): Promise {
    // 태스크 생성을 위한 API 요청
  }

  async updateTask(taskId: string, taskData: TaskData): Promise {
    // 태스크 수정을 위한 API 요청
  }

  async getTask(taskId: string): Promise {
    // 태스크 조회를 위한 API 요청
  }
}

// React 컴포넌트 어댑터
function TaskList() {
  const taskService: TaskService = new ApiTaskService();

  const handleCreateTask = async (taskData: TaskData) => {
    await taskService.createTask(taskData);
    // 태스크 목록 업데이트
  };

  // ...
}

예시 (클린 아키텍처):

// 엔티티
class Task {
  constructor(public id: string, public title: string, public description: string) {}
}

// 유스 케이스
class CreateTaskUseCase {
  constructor(private taskGateway: TaskGateway) {}

  async execute(title: string, description: string): Promise {
    const task = new Task(generateId(), title, description);
    await this.taskGateway.create(task);
    return task;
  }
}

// 인터페이스 어댑터 - 게이트웨이
interface TaskGateway {
  create(task: Task): Promise;
}

class ApiTaskGateway implements TaskGateway {
  async create(task: Task): Promise {
    // 태스크 생성을 위한 API 요청
  }
}

// 인터페이스 어댑터 - 컨트롤러
class TaskController {
  constructor(private createTaskUseCase: CreateTaskUseCase) {}

  async createTask(req: Request, res: Response) {
    const { title, description } = req.body;
    const task = await this.createTaskUseCase.execute(title, description);
    res.json(task);
  }
}

// 프레임워크 및 드라이버 - React 컴포넌트
function TaskForm() {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const apiTaskGateway = new ApiTaskGateway();
  const createTaskUseCase = new CreateTaskUseCase(apiTaskGateway);
  const taskController = new TaskController(createTaskUseCase);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await taskController.createTask({ body: { title, description } } as Request, { json: (data: any) => console.log(data) } as Response);
  };

  return (
    

       setTitle(e.target.value)} />
       setDescription(e.target.value)} />
      <button type="submit">Create Task</button>
    </form>
  );
}

</code>
</pre>

<h3>4. 의존성 주입 구현하기</h3>

<p>코어를 외부 시스템으로부터 더욱 분리하기 위해, 의존성 주입을 사용하여 어댑터나 계층을 코어에 제공합니다. 이를 통해 코어 코드를 수정하지 않고도 어댑터나 계층의 다른 구현체를 쉽게 교체할 수 있습니다.</p>

<p><b>예시:</b></p>

<pre>
<code>
// TaskList 컴포넌트에 TaskService 주입하기
function TaskList(props: { taskService: TaskService }) {
  const { taskService } = props;

  const handleCreateTask = async (taskData: TaskData) => {
    await taskService.createTask(taskData);
    // 태스크 목록 업데이트
  };

  // ...
}

// 사용법
const apiTaskService = new ApiTaskService();
<TaskList taskService={apiTaskService} />
</code>
</pre>

<h3>5. 단위 테스트 작성하기</h3>

<p>헥사고날 및 클린 아키텍처의 핵심 이점 중 하나는 향상된 테스트 용이성입니다. 외부 종속성에 의존하지 않고 핵심 비즈니스 로직에 대한 단위 테스트를 쉽게 작성할 수 있습니다. 모의 어댑터나 계층을 사용하여 외부 시스템의 동작을 시뮬레이션하고 코어 로직이 예상대로 작동하는지 검증하세요.</p>

<p><b>예시:</b></p>

<pre>
<code>
// 모의 TaskService
class MockTaskService implements TaskService {
  async createTask(taskData: TaskData): Promise<Task> {
    return Promise.resolve({ id: '1', ...taskData });
  }

  async updateTask(taskId: string, taskData: TaskData): Promise<Task> {
    return Promise.resolve({ id: taskId, ...taskData });
  }

  async getTask(taskId: string): Promise<Task> {
    return Promise.resolve({ id: taskId, title: 'Test Task', description: 'Test Description' });
  }
}

// 단위 테스트
describe('TaskList', () => {
  it('태스크를 생성해야 합니다', async () => {
    const mockTaskService = new MockTaskService();
    const taskList = new TaskList({ taskService: mockTaskService });

    const taskData = { title: 'New Task', description: 'New Description' };
    const newTask = await taskList.handleCreateTask(taskData);

    expect(newTask.title).toBe('New Task');
    expect(newTask.description).toBe('New Description');
  });
});
</code>
</pre>

<h2>실용적인 고려사항과 과제</h2>

<p>헥사고날 및 클린 아키텍처는 상당한 이점을 제공하지만, 프론트엔드 개발에 적용할 때 염두에 두어야 할 몇 가지 실용적인 고려사항과 과제도 있습니다:</p>

<ul>
 <li><b>복잡성 증가:</b> 이러한 아키텍처는 특히 작거나 간단한 애플리케이션의 경우 코드베이스에 복잡성을 더할 수 있습니다.</li>
 <li><b>학습 곡선:</b> 개발자는 이러한 아키텍처를 효과적으로 구현하기 위해 새로운 개념과 패턴을 배워야 할 수 있습니다.</li>
 <li><b>과잉 엔지니어링:</b> 애플리케이션을 과잉 엔지니어링하는 것을 피하는 것이 중요합니다. 간단한 아키텍처로 시작하여 필요에 따라 점차 복잡성을 추가하세요.</li>
 <li><b>추상화 균형:</b> 적절한 수준의 추상화를 찾는 것은 어려울 수 있습니다. 너무 많은 추상화는 코드를 이해하기 어렵게 만들 수 있고, 너무 적은 추상화는 강한 결합으로 이어질 수 있습니다.</li>
 <li><b>성능 고려사항:</b> 과도한 추상화 계층은 잠재적으로 성능에 영향을 미칠 수 있습니다. 애플리케이션을 프로파일링하고 성능 병목 현상을 식별하는 것이 중요합니다.</li>
</ul>

<h2>국제적인 예시 및 적용 사례</h2>

<p>헥사고날 및 클린 아키텍처의 원칙은 지리적 위치나 문화적 맥락에 관계없이 프론트엔드 개발에 적용할 수 있습니다. 그러나 구체적인 구현 및 적용 방식은 프로젝트 요구사항과 개발팀의 선호도에 따라 달라질 수 있습니다.</p>

<p><b>예시 1: 글로벌 전자상거래 플랫폼</b></p>

<p>글로벌 전자상거래 플랫폼은 헥사고날 아키텍처를 사용하여 핵심 장바구니 및 주문 관리 로직을 UI 프레임워크 및 결제 게이트웨이로부터 분리할 수 있습니다. 코어는 상품 관리, 가격 계산, 주문 처리를 담당합니다. 주도 어댑터에는 상품 카탈로그, 장바구니, 결제 페이지를 위한 React 컴포넌트가 포함됩니다. 피주도 어댑터에는 다양한 결제 게이트웨이(예: Stripe, PayPal, Alipay) 및 배송 업체(예: FedEx, DHL, UPS)를 위한 API 클라이언트가 포함됩니다. 이를 통해 플랫폼은 다양한 지역의 결제 수단과 배송 옵션에 쉽게 적응할 수 있습니다.</p>

<p><b>예시 2: 다국어 소셜 미디어 애플리케이션</b></p>

<p>다국어 소셜 미디어 애플리케이션은 클린 아키텍처를 사용하여 핵심 사용자 인증 및 콘텐츠 관리 로직을 UI 및 현지화 프레임워크로부터 분리할 수 있습니다. 엔티티는 사용자, 게시물, 댓글을 나타냅니다. 유스 케이스는 사용자가 콘텐츠를 생성, 공유하고 상호 작용하는 방법을 정의합니다. 인터페이스 어댑터는 콘텐츠를 다른 언어로 번역하고 다른 UI 컴포넌트에 맞게 데이터를 포맷하는 것을 처리합니다. 이를 통해 애플리케이션은 새로운 언어를 쉽게 지원하고 다양한 문화적 선호도에 적응할 수 있습니다.</p>

<h2>결론</h2>

<p>헥사고날 및 클린 아키텍처는 유지보수 가능하고, 테스트 가능하며, 확장 가능한 프론트엔드 애플리케이션을 구축하기 위한 귀중한 원칙을 제공합니다. 핵심 비즈니스 로직을 외부 종속성으로부터 분리함으로써, 시간이 지남에 따라 발전하기 더 쉬운 유연하고 적응성 높은 코드베이스를 만들 수 있습니다. 이러한 아키텍처는 초기에 약간의 복잡성을 더할 수 있지만, 유지보수성, 테스트 용이성, 확장성 측면에서의 장기적인 이점은 복잡한 프론트엔드 프로젝트에 대한 가치 있는 투자가 됩니다. 간단한 아키텍처로 시작하여 필요에 따라 점차 복잡성을 추가하고, 관련된 실용적인 고려사항과 과제를 신중하게 고려하는 것을 잊지 마세요.</p>

<p>이러한 아키텍처 패턴을 채택함으로써 프론트엔드 개발자는 전 세계 사용자의 변화하는 요구를 충족시킬 수 있는 더 견고하고 신뢰할 수 있는 애플리케이션을 구축할 수 있습니다.</p>

<h3>더 읽을거리</h3>

<ul>
  <li>헥사고날 아키텍처: <a href="https://alistaircockburn.com/hexagonal-architecture/">https://alistaircockburn.com/hexagonal-architecture/</a></li>
  <li>클린 아키텍처: <a href="https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html">https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html</a></li>
</ul>
</div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">프론트엔드 아키텍처</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">헥사고날 아키텍처</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">클린 아키텍처</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">프론트엔드 개발</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">소프트웨어 아키텍처</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">확장 가능한 애플리케이션</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">테스트 가능한 코드</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">유지보수 가능한 코드</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI 아키텍처</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">자바스크립트 아키텍처</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">타입스크립트 아키텍처</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>